<template>
  <div style="display: flex;flex-direction: column;align-items: center;justify-content: center">
    <el-form :model="setting" label-width="100px">
      <el-card class="box-card">
        <el-form-item label="每日复习任务量">
          <el-input v-model="setting.taskNumber" placeholder="输入数字" :disabled="disabled"/>
        </el-form-item>
      </el-card>
      <el-card class="box-card">
        <el-form-item label="复习小组数量">
          <el-input v-model="setting.groupNumber" placeholder="输入数字" :disabled="disabled"/>
        </el-form-item>
      </el-card>
      <el-card class="box-card">
        <el-form-item label="记忆时隐藏">
          <div style="display: flex;flex-direction: row" class="radio-group">
            <el-radio v-model="setting.hide" label="中文" size="small" border :disabled="disabled">中文</el-radio>
            <el-radio v-model="setting.hide" label="英文" size="small" border :disabled="disabled">英文</el-radio>
            <el-radio v-model="setting.hide" label="无" size="small" border :disabled="disabled">无</el-radio>
          </div>
        </el-form-item>
      </el-card>
      <el-card class="box-card">
        <el-form-item label="复习比例">
          <el-input v-model="setting.proportion" placeholder="输入数字（百分比）" :disabled="disabled"/>
        </el-form-item>
      </el-card>
      <el-form-item>
        <div style="margin: 20px;">
          <el-button type="primary" size="default" icon="Setting" style="margin-right: 30px" @click="ModifySetting()">修改</el-button>
          <el-button type="primary" size="default" icon="Upload" @click="saveSetting">保存</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "Setting",
  created() {
    request.get("/api/setting/get",{
        params:{
          id:this.id
        }
    }).then(res => {
      console.log(res)
      this.setting = res.data
    })

  },
  data(){
    return {
      setting:{
        sid:null,
        taskNumber:null,
        groupNumber:null,
        hide:null,
        proportion:null
      },
      disabled:true,
      id:1
    }
  },
  methods:{
    ModifySetting(){
      this.disabled = !this.disabled;
    },
    saveSetting(){
      this.disabled = true
      request.post("/api/setting/update",this.setting).then(res => {
        if (res.code === '0') {
          this.$message({
            type: "success",
            message: "修改成功"
          })
        } else {
          this.$message({
            type: "error",
            message: res.msg
          })
        }
      })
    }
  }
}
</script>

<style scoped>
.box-card {
  width: 400px;
  height: 60px;
  padding: 0px;
  margin: 5px;
}
.el-input{
  width: 200px;
}
.el-form-item {
  font-size: 20px
}
.radio-group .el-radio {
  margin-right: 10px;
}
</style>
